
<template>
	<view class="login">
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">登录</block>
		</cu-custom>
		
		<view class="content padding-xl">
			<!-- 头部logo -->
			<view class="flex justify-center">
				<image  mode="widthFix" class="header" src="https://image.baidu.com/search/down?tn=download&ipn=dwnl&word=download&ie=utf8&fr=result&url=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fpic194.nipic.com%252Ffile%252F20181128%252F17503766_200251819000_2.jpg%26refer%3Dhttp%253A%252F%252Fpic194.nipic.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1621135312%26t%3D4565e28da19c5923b76a7a0391da6d16&thumburl=https%3A%2F%2Fimg2.baidu.com%2Fit%2Fu%3D3608877817%2C1071496655%26fm%3D26%26fmt%3Dauto%26gp%3D0.jpg"></image>
			</view>
			<view class="flex justify-center">
				<view class="">欢迎你！</view>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput v-model="username" typ="text" maxlength="11" placeholder="请输入登录账户"></wInput>
				<wInput v-model="password" typ="password" maxlength="11" placeholder="请输入登录密码"></wInput>
			</view>
			<wButton text="登 录" :rotate="isRotate"  @click.native="startLogin"></wButton>
			
			<view class="flex justify-center margin-top-xl">
				<navigator class="cl-white pointer flex-1" url="/pages/other/register" >注册</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import wInput from '@/components/watch-login/watch-input.vue'
import wButton from '@/components/watch-login/watch-button.vue'	 
	let weixinAuthService
	export default {
		data:function(){
			return {
				username:"",
				password:"",
				isRotate: false, //是否加载旋转
			}
		},
		components: {
			wInput,
			wButton,
		},
		onLoad:function(){
			
		},
		methods:{
			startLogin() {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false
				}
				//如果没输入用户名
				if (this.username.length == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '用户名不能为空'
					})
					return
				}
				//如果密码少于6位
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密码不能少于6位'
					})
					return
				}
			
				// 网络请求
				const params = {
					username: this.username,
					password: this.password
				}
				this.login(params)
			},
			login(params) {
				if (params) {
					this.isRotate = true
					const { username, password } = params
					//触发登录的云函数
					uniCloud.callFunction({
						name: 'user-center',
						data: {
							action: 'login',
							params: {
								username: username,
								password: password
							}
						}
					}).then(response => {
						console.log(response);
							//如果登录失败
							if(response.result.code !== 0){
								uni.showToast({
									title:  response.result.msg,
									icon: 'none'
								})
								this.isRotate = false
							}
							//如果登录成功
							else{
								this.isRotate = false
								//本地存token存用户信息存密码
								uni.setStorageSync('uniIdToken', response.result.token)
								// 存到vuex里和本地存储
								this.$store.commit('login', params)
								this.$store.commit('getInfo', response.result.userInfo)
								uni.reLaunch({
									url: '/pages/take/take',
								})
							}
						})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login{
		background-color: #FFFFFF;
		width: 100vw;
		height: 100vh;
	}
	.main{
		margin-top: 40upx;
	}
	.header{
		width: 30vw;
	}
</style>
